<template>
  <div class="param-main">
    <el-form ref="tblMain" :model="tblMain" labelPosition="right" inline="" label-suffix=":" label-width="85px">
      <el-row :span="24">
        <el-col :span="6">
          <el-form-item prop="startTime" label="开始时间">
            <el-date-picker v-model.trim="tblMain.param.startTime" type="date" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" placeholder="开始时间" size="small"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="endTime" label="结束时间">
            <el-date-picker v-model.trim="tblMain.param.endTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              placeholder="结束时间" :change="compareDate()" size="small"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="margin-top: 1px;">
          <el-button type="primary" size="small" @click="initTableData()">查询</el-button>
          <el-button size="small" @click="dataReset()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="chart_room" id="linechart"></div>
  </div>
</template>
<script>
import tool from '@/tool'
import { formatDate } from "@/utils/dateFormat";
import echarts from "echarts";
import {
  financeItemSummary
} from '@/api/business'
export default ({
  name: 'MaintainList',
  data () {
    return {
      tblMain: tool.genTableData({
        param: {
          startTime: "",
          endTime: ""
        },
        items: []
      }),
      defaultStartTime: "",
      defaultEndTime: "",
    }
  },
  mounted () {
    this.defaultStartTime = formatDate(
      new Date(new Date().setDate(new Date().getDate() - 30)),
      "yyyy-MM-dd"
    );
    this.defaultEndTime = formatDate(
      new Date(),
      "yyyy-MM-dd"
    );
    this.tblMain.param.startTime = this.defaultStartTime
    this.tblMain.param.endTime = this.defaultEndTime
    this.initTableData();
  },
  methods: {
    compareDate () {
      if (
        this.tblMain.param.startTime &&
        this.tblMain.param.endTime &&
        this.tblMain.param.startTime > this.tblMain.param.endTime
      ) {
        this.$message.warning('结束时间不能小于开始时间！')
        this.tblMain.param.endTime = "";
      }
    },
    initChart (val) {
      this.chart = echarts.init(document.getElementById("linechart"));
      this.chart.clear();
      let option = {

        color: ["#3398DB"],
        legend: {
          top: "top",
          show: false
        },
        // grid: {
        //   left: "5%",
        //   right: "5%",
        //   bottom: "3%",
        //   containLabel: true
        // },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#06244F",
            interval: 0,
            // rotate: 20,
            fontSize: "14"
          },
          nameTextStyle: {
            color: "#ffffff",
            fontSize: "14"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#6b7a94",
              width: 1
            } // x轴坐标轴颜色
          },
          data: []
        },
        yAxis: {
          name: '单位:元',
          nameTextStyle: {
            color: "#06244F",
            fontSize: "14"
          },
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#6b7a94",
              width: 1
            }
          },

          axisLabel: {
            color: "#06244F",
            fontSize: "14",
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "solid", //设置网格线类型 dotted：虚线   solid:实线
              color: "#06244F"
            },
            show: false //隐藏或显示
          }
        },
        series: [
          {
            name: "总金额",
            barWidth: 50,
            type: "bar",
            // stack: "Total",
            label: {
              show: true, // 开启标签显示
              position: 'top' // 将标签放在柱子的顶部位置
            },
            data: []
          }
        ]
      };
      let xdata = [];
      let ydata = [];
      for (let i = 0; i < val.length; i++) {
        xdata[i] = val[i].itemName;
        ydata[i] = val[i].total;
      }
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      this.chart.setOption(option);
    },
    dataReset () {
      this.tblMain.currentPage = 1
      this.tblMain.pageSize = 10
      this.tblMain.param.startTime = this.defaultStartTime
      this.tblMain.param.endTime = this.defaultEndTime
      this.initTableData()
    },
    initTableData () {
      let me = this
      let param = {
        startDate: me.tblMain.param.startTime,
        endDate: me.tblMain.param.endTime,
      }
      financeItemSummary(param).then(res => {
        let data = res.data
        if (data && data.code == 0) {
          this.initChart(data.data);
        }
      })
    },
  }
})
</script>
<style scoped lang="less">
.chart_room {
  width: 100%;
  height: 500px;
}
</style>
